<template>
  <div>
    <van-nav-bar title="赛事">
      <template #left>
        <div class="back" @click="backlink()">
          <van-icon name="arrow-left" color="#999999" />
        </div>
      </template>
      <template #right>
        <div class="history" style="font-size: 15px; color: black">战绩</div>
      </template>
    </van-nav-bar>
    <div class="search">
      <van-search
        v-model="searchvalue"
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索内容"
        class="search"
      >
        <template #right-icon>
          <van-button
            text="搜索"
            @click="changetab"
            class="searchbtn"
          ></van-button>
        </template>
      </van-search>
    </div>
    <van-tabs>
      <van-tab title="全部比赛">
        <div class="allCompetition">
          <div class="competition" v-for="i in 6" :key="i">
            <van-row
              class="competitionrow"
              @click="gotodetail('CompetitionDetail', i)"
            >
              <van-col span="8" class="image" style="width: 100%">
                <div class="competitionbox">
                  <img
                    src="https://iph.href.lu/90x90?fg=666666&bg=cccccc"
                    alt=""
                    class="competitionboximg"
                  />
                </div>
              </van-col>
              <van-col
                span="16"
                class="content"
                style="display: flex; flex-direction: column"
              >
                <div
                  class="title"
                  style="color: #515153; font-size: 0.45rem; font-weight: bold"
                >
                  比赛XXXXXXXXXX
                </div>
                <div class="time" style="font-size: 0.4rem; color: #969799">
                  时间XXXXXXXXXX
                </div>
                <div class="location-box">
                  <div class="location">比赛地点XXXXXXXX</div>
                  <div class="location">XXXXXkm</div>
                </div>
                <van-divider style="margin: 0.1rem 0" />
                <div class="detail-box">
                  <div class="bonous">
                    <span>奖金：XXXXX</span>
                  </div>
                  <div class="join">
                    <span>报名XXXX</span>
                  </div>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-tab>
      <van-tab title="奖金"> 奖金 </van-tab>
      <van-tab title="时间"> 时间 </van-tab>
      <template #nav-left>
        <div class="select-location" @click="openPopup">
          <van-icon name="location" />
          {{ userlocation || "全国" }}
        </div>
      </template>
      <template #nav-right>
        <div style="margin-left: 5%" />
      </template>
    </van-tabs>

    <van-popup v-model:show="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onAreaConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      showArea: false,
      areaList,
      locations: {},
      userlocation: "",
      searchvalue: "",
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    changetab() {},
    openPopup() {
      this.showArea = true;
    },
    onAreaConfirm(value) {
      this.userlocation = value.selectedOptions
        .map((item) => item.text)
        .join("/");
      this.showArea = false;
    },
    gotodetail(name, data) {
      this.$router.push({
        name: name,
        params: {
          competitioninfo: JSON.stringify(data),
        },
      });
    },
  },
};
</script>

<style scoped>
.search {
  background-color: transparent !important;
  padding-bottom: 0;
}

::v-deep .van-search__content--round {
  /* 勿删，搜索框外边框 */
  border: 1px solid #5f94fc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  border-radius: 20px;
}

.searchbtn {
  width: 50px;
  height: 25px;
  margin-bottom: 5px;
  margin-right: -5px;
  font-size: 14px;
  color: #fff;
  border-radius: 20px;
  padding: 0 5px;
  background-color: #5f94fe;
}
.competition {
  margin: 10px 10px;
  padding: 0;
  height: 30%;
  background-color: white;
  border-radius: 30px;
}
.competitionrow {
  background-color: white;
  border-radius: 30px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 10px;
}
.competitionbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.competitionboximg {
  object-fit: cover;
  width: 90%;
  height: auto;
  border-radius: 20px;
  margin: 0;
}
.location-box {
  color: #969799;
  font-size: 0.4rem;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.detail-box {
  color: #515153;
  font-size: 0.35rem;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.select-location {
  font-size: 15px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5%;
  margin-right: auto;
}
</style>